import React, { Component } from "react";

export default class App extends Component {
  // state是固定的，不能写成其他名称
  // 方式一
  //   state = {
  //     collectionFlag: false,
  //     myText: "Hello React,1111",
  //     myNum: 1,
  //   };

  constructor() {
    // 必须调用supper()
    super();
    // 方式二
    this.state = {
      collectionFlag: false,
      myText: "Hello React,aaaaaaaaa",
      myNum: 1,
    };
  }

  render() {
    return (
      <div>
        <h1>08</h1>
        <button
          onClick={() => {
            // 不能直接修改，必须使用setState方法修改
            this.setState({
              collectionFlag: !this.state.collectionFlag,
              myNum: this.state.myNum * 2,
            });
          }}
        >
          {this.state.collectionFlag ? "取消收藏" : "收藏"}
        </button>
        <div>{this.state.myText}</div>
        <div>{this.state.myNum}</div>
      </div>
    );
  }
}
